<template>
  <div  class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px; margin-bottom: 32px">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane key="用户管理" label="用户管理" name="用户管理" lazy>
          <userManagement ref="用户管理"></userManagement>
        </el-tab-pane>
        <el-tab-pane key="角色权限" label="角色权限" name="角色权限" lazy>
          <rolePermissions ref="角色权限"></rolePermissions>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import  userManagement  from './userManagement.vue'
import  rolePermissions  from './rolePermissions.vue'
export default {
  components: { userManagement, rolePermissions },
data() {
  return {
    activeName: '用户管理',
  }
},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    handleClick(item){
      this.$nextTick(() => {
        this.$refs[item.name].getData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "~@/styles/variables.scss";

</style>